<template>
	<!-- <el-select
	    v-model="keyword"
	    placeholder="Please input"
	    class="input-with-select"
		
	> -->
	<el-select v-model="selActivity" value-key="description" placeholder="请选择" style="width:50%" @change="getSAs">
		
	  <el-option v-for="item in activityOption"
			:key="item.id"
			:label="item.description"
			:value="item"
			>
		</el-option>

	   <!-- <template #append>
	        <el-button @click="search"><el-icon><Search /></el-icon></el-button> 
	    </template> -->     
	</el-select>
	
	
	
	<el-table
	  :data="tableData"
	  style="width: 100%"
	  stripe
	  ref="multipleTable"
	   @selection-change="handleSelectionChange"
	   :header-cell-style="{background:'#eef1f6',color:'#606266'}"
	>
		<el-table-column min-width="15%" type="selection"></el-table-column>
		
		
		<el-table-column prop="student.name" label="学生姓名" sortable />
		<el-table-column prop="activity.description" label="活动名称" />
		<el-table-column prop="state" label="状态" :formatter="formatProtocolType"/>
		<el-table-column  label="分数" sortable  width="80" >
			<template #default="scope">
				<el-input v-model="scope.row.score"></el-input>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="120"> 
		   <template #default="scope">
					  <el-button
						size="small"
						type="success"
						@click="setGrade(scope.row)"
						 squire><el-icon>保存</el-icon></el-button> 
			</template>				
		</el-table-column>
	</el-table>    
	
</template>

<script setup>
	import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue'
	import{ useRouter } from 'vue-router'
	let { proxy } = getCurrentInstance();
	let selActivity=ref({});
	let activityOption=ref([]);
	let tableData =ref([]);
	
	
	function getTableData(){
		proxy.$http.get("/findActivitySA?id="+activityOption.value.id,
		{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			tableData.value=res.data.data;//获取学院下拉数据，仅仅id和名称
		})
	}
	onMounted(()=>{
		getTableData();  //请求第一页的表格数据
		proxy.$http.get("/activityReadByTI?id="+ window.sessionStorage.getItem('userId'),
		{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			activityOption.value=res.data.data;//获取学院下拉数据，仅仅id和名称
			console.log(activityOption.value)
		})
	});
	
	// function search(id){
	// 	proxy.$http.get("/findActivitySA?id="+activityOption.value.id,
	// 	{"headers":{"token":window.sessionStorage.getItem("token")}})
	// 	.then(res => {
	// 		tableData.value=res.data.data;//获取学院下拉数据，仅仅id和名称
	// 	})
	// }
	
	function getSAs(){
		proxy.$http.get("/findActivitySA?id="+selActivity.value.id,
		{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			tableData.value=res.data.data;//获取学院下拉数据，仅仅id和名称
		})
	}
	
	function setGrade(row){
		proxy.$http.post("/saUpdate",row,
		{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			//getTableData();  //更新表格数据
			alert(res.data.message)//获取学院下拉数据，仅仅id和名称
		})
	}
	
	
	function  formatProtocolType(row) {
	  　　let type = row.state;
	 　　switch (type) {
	  　　　　case 1:
	  　　　　　　type = "通过";
	  　　　　　　break;
	  　　　　case 0:
	  　　　　　　type = "待审核";
	 　　　　　　break;
	 　　　　case 2:
	 　type = "未通过";
	break;
	 　　}
	 
	 　　return type;
	 
	 }
</script>

